<template>
  <baseEchart :chart-data="pieData" :get-option="getOption"></baseEchart>
</template>

<script setup lang="ts">
  import type { EChartsOption } from 'echarts'
  import type { ICharginItem } from '@/type/home';

  const props = defineProps({
    pieData: {
      type: Array,
      default: () => []
    },
    getOption: {
      type: Function,
      default: () => function() {}
    }
  })
  const getOption = (chartdata) => {
    let colors = chartdata.map((item: any) => item.color);
    let data = chartdata.map((item: any) => {
      return {
        value: item.value,
        name: item.name,
      };
    });
    const total = chartdata.reduce((a: any, b: any) => a + b.value * 1, 0);
    const option: EChartsOption = {
      color: colors,
      title: {
        text: `{nameSty| 充电桩总数}\n{number|${total}}`,
        top: "50%",
        left: "30%",
        textStyle: {
          rich: {
            nameSty: {
              fontSize: 19,
              color: "white",
              padding: [10, 0],
            },
            number: {
              fontSize: 24,
              color: "white",
              padding: [4, 0, 0, 20],
            },
          },
        },
      },
      legend: {
        orient: "vertical",
        right: "10%",
        top: "18%",
        itemGap: 20,
        itemWidth: 16,
        icon: "rect",
        formatter: function (name: any) {
          const currentItem: ICharginItem  = props.pieData.find((item: any) => item.name === name) as ICharginItem;
          return (
            "{nameSty|" +
            currentItem?.name +
            "}\n" +
            "{numberSty|" +
            currentItem?.value +
            "个 }" +
            "{preSty|" +
            currentItem?.percentage +
            "}"
          );
        },
        textStyle: {
          rich: {
            nameSty: {
              fontSize: 12,
              color: "#FFFFFF",
              padding: [10, 14],
            },
            numberSty: {
              fontSize: 12,
              color: "#40E6ff",
              padding: [0, 0, 0, 14],
            },
            preSty: {
              fontSize: 12,
              color: "#40E6ff",
            },
          },
        },
      },
      series: [
        {
          type: "pie",
          center: ["40%", "57%"],
          radius: ["30%", "75%"],
          label: {
            show: false,
          },
          data: data,
          roseType: "area",
        },
      ],
    }

    return option
  }
</script>